<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>宠物小知识</title>
    <link rel="stylesheet" href="css/header.css" media="screen" title="no title">
    <link rel="stylesheet" href="css/cyclopedia.css" media="screen" title="no title">
    <link rel="stylesheet" href="css/article.css" media="screen" title="no title">
    <script src="js/jquery-3.1.0.js" charset="utf-8"></script>
    <style media="screen">
      *{
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div class="header">
        <div class="head">
            <ul class="firstHead">
              <li><a href="index.html" target="_blank">波奇首页</a></li>
                <li><a href="shop.html" target="_blank">波奇商城</a></li>
                <li><a href="serve.html" target="_blank">波奇服务</a></li>
                <li><a href="message.html" target="_blank">波奇论坛</a></li>
                <li><a href="cyclopedia.html" target="_blank">宠物百科</a></li>
            </ul>
            <ul class="attention">
                <li><a href="#">关注我们<span><img src="" alt="" /></span></a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#"><span><img src="" alt="" /></span>收藏</a></li>
            </ul>
            <ul class="register">
                <li><a href="login.html" target="_blank">登陆</a></li>
                <li><a href="script:;">|</a></li>
                <li><a href="register.html" target="_blank">免费注册</a></li>
            </ul>
            <ul class="userLogin">
                <li>
                    <a href="script:;" id="userName"></a>
                </li>
                <li>|</li>
                <li><a href="script:;" id="quit">退出</a></li>
            </ul>

        </div>
    </div>
    <div class="navigation">
      <div class="logo">
        <img src="source/images/logo_baike.gif" alt="" />
      </div>
      <div class="serch">
          <input id="keyword" type="text" name="name" value="" placeholder="请输入关键字">
          <img id="search" src="source/images/ind_sch.png" alt="" />
      </div>
      <div class="app">
        <a href="#"><img src="source/images/app.jpeg" alt="" /></a>
      </div>
    </div>
    <div class="nav">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">狗狗</a></li>
        <li><a href="#">猫咪</a></li>
        <li><a href="#">小宠</a></li>
        <li><a href="#">水族</a></li>
        <li><a href="#">爬虫</a></li>
      </ul>
    </div>
    <div class="content">
      <div class="content_nav">
        <p>
          <span><a href="#">首页</a>></span><span><a id="kind" href="#"></a>></span><span class="title"></span>
        </p>
      </div>
      <div class="content_top">
        <img class="img" src="" alt="" />
      </div>
      <div class="content_auto">
        <h2 class="title"></h2>
        <div class="abstract_center">
          <p class="wrap1">

          </p>
        </div>
        <div class="abstract_body">
          <div class="body_wenzi wrap2">

          </div>
        <div class="abstract_img">
          <img class="img" src="" alt="" />
          <span id="imgname"></span>
        </div>
        <div class="body_wenzi wrap3">

        </div>
        </div>
      </div>
    </div>
    <div class="footer">
       <ul>
         <li><a href="#">关于我们</a></li>|
         <li><a href="#">友情链接</a></li>|
         <li><a href="#">诚聘英才</a></li>|
         <li><a href="#">联系我们</a></li>|
         <li><a href="#">网站地图</a></li>|
         <li><a href="#">意见反馈</a></li>|
         <li><a href="#">帮助中心</a></li>|
         <li><a href="#">客服热线：123456789</a></li>
       </ul>
       <p>
         Copyright © 2007-2016 Boqii.com All Rights Reserved 光橙（上海）信息科技有限公司 版权所有 沪ICP备13034501号-2 增值电信业务经营许可证：沪B2-20140120
       </p>
       <p class="href">
          <a href="http://www.sgs.gov.cn/"><img src="source/images/foot_gs.png" alt="" /></a>
          <a href="#"><img src="source/images/foot_cx.png" alt="" /></a>
          <a href="#"><img src="source/images/foot_kx.png" alt="" /></a>
          <a href="#"><img src="source/images/foot_zx.png" alt="" /></a>
       </p>
    </div>
  </body>
</html>
<script type="text/javascript">
var register = document.getElementsByClassName("register")[0];
var userLogin =document.getElementsByClassName("userLogin")[0];
var userName = document.getElementById("userName");
var quit = document.getElementById("quit");
window.ready = readStorage();
setInterval(readStorage,2000);
//读取storage的数据
function readStorage(){
  var storage = window.localStorage;
  if (typeof(storage["user"])=='undefined') {
    register.style.display ="inline-block";
    userLogin.style.display = "none";
     return false;
  }else if(storage["user"]==""){
    register.style.display ="inline-block";
    userLogin.style.display = "none";
     return false;
  }else {
    var myDate =  new Date();
    var currenTime = myDate.getTime();
    if (currenTime >= Number(storage["userTime"])+3600000) {
      storage["user"] =="";
    }else {
        register.style.display ="none";
        userLogin.style.display = "inline-block";
        userName.innerText = storage["user"];
    }

  }
}
quit.onclick = function (){
  var storage = window.localStorage;
  register.style.display ="inline-block";
  userLogin.style.display = "none";
  storage["user"] = "";
}



var title=window.location.search.slice(window.location.search.indexOf("?")+1);
console.log(title);
var XMLHttp
if (window.ActiveXObject) {
  XMLHttp = new ActiveXObject('Microsoft.XMLHTTP');
}else{
  XMLHttp = new XMLHttpRequest();
}
var url = "php/animalArticle.php?title="+title;
  console.log(url);
XMLHttp.open('get',url,true);
XMLHttp.send(null);
XMLHttp.onreadystatechange = function () {
  if (XMLHttp.readyState == 4) {
    if (XMLHttp.status == 200) {
      obj = JSON.parse(XMLHttp.response);
      console.log(obj);
      var Title = document.getElementsByClassName("title");
      for (var i = 0; i < Title.length; i++) {
        Title[i].innerText = obj.title;
        // console.log(name[i].innerText);
      }
      var img = document.getElementsByClassName("img");
        img[0].src = obj.imgurl1;
        img[1].src = obj.imgurl2;

      var imgname = document.getElementById("imgname");
      imgname.innerText = obj.imgname;

      var kind = document.getElementById("kind");
      kind.innerText = kinds(obj.kind1,obj.kind2);
      function kinds(kind1,kind2) {
        var text = '';
        switch (kind1) {
          case '1':
            text+='狗狗';
            break;
          case '2':
            text+='猫咪';
            break;
          case '3':
            text+='小宠爬虫水族';
            break;
        }
        switch (kind2) {
          case '1':
            text+='饲养';
            break;
          case '2':
            text+='训练';
            break;
          case '3':
            text+='医疗';
            break;
        }
        return text;
      }
      $(".wrap1").load('data2.html #'+obj.wrap+1);
      $(".wrap2").load('data2.html #'+obj.wrap+2);
      $(".wrap3").load('data2.html #'+obj.wrap+3);
    }
  }
}
var keyword = document.getElementById("keyword");
var search = document.getElementById("search");
search.onclick = function () {
  if (!keyword.value) {
    keyword.focus();
  }else{
    window.open('wares.html?'+keyword.value);
  }
}
</script>
